<!--
 * @Description: 文章更多页面
 * @Author: Huang Junjie
 * @Date: 2021-04-30 10:22:02
 * @LastEditTime: 2021-07-07 10:25:36
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="view-style">
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/ywzt/ywzt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar />
    <!-- 顶部导航栏 -->

    <el-scrollbar>
      <!-- 主要内容 -->
      <div class="content">
        <div class="title">{{ articleTypeName }}</div>
        <div class="data-list">
          <div
            v-for="(item, index) in tableData.list"
            :key="`a${index}`"
            class="row-list"
          >
            <el-row>
              <el-col class="row-list-left" :span="12">
                <div class="row-list-left-icon" />
                <a @click="goToArticleDetailView(item)">{{ item.title }}</a>
              </el-col>
              <el-col class="row-list-right" :span="12">
                <span>{{ item.createDatetime }}</span>
              </el-col>
            </el-row>
            <div v-show="(index + 1) % 5 === 0 && index !== (tableData.list - 1)" class="row-list-hr" />
          </div>
        </div>
      </div>
      <!-- 主要内容 -->
    </el-scrollbar>

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="getDataListData.page"
        :size.sync="getDataListData.size"
        @pagination="changePageOption"
      />
    </div>
    <!-- 分页 -->
  </div>
</template>

<script>
import { getArticleDataList } from '@/api/jjxt/article-more-view';
import { getDatatime } from '@/utils';
import { getToken } from '@/utils/auth';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';

export default {
  name: 'ArticleMoreView',
  components: {
    TopNavigationBar
  },
  data() {
    return {
      hasToken: getToken() && getToken() !== 'undefined',

      // 文章类型名称
      articleTypeName: this.$route.query.typeName,

      // 查询列表请求参数
      getDataListData: {
        dtId: 'BUREAU_ARTICLE000001',
        itemValue: '',
        type: 2,
        page: 1,
        size: 20
      },

      // 表格数组
      tableData: {
        list: [],
        total: 0
      }
    };
  },
  mounted() {
    if (!this.$route.query.id) {
      this.getDataListData.type = 1;
    } else {
      this.getDataListData.itemValue = this.$route.query.id;
    }
    this.getArticleDataList(); // 查询文章信息列表
  },
  methods: {
    // 查询文章信息列表
    getArticleDataList() {
      getArticleDataList(this.getDataListData).then(res => {
        res.data.records.forEach(val => {
          val.createDatetime = getDatatime(new Date(val.createDatetime), 0, 10);
        });
        this.tableData = {
          list: res.data.records,
          total: res.data.total
        };
      });
    },

    // 改变分页配置
    changePageOption(data) {
      this.getDataListData.page = data.page;
      this.getDataListData.size = data.size;
      this.getArticleDataList(); // 查询文章信息列表
    },

    // 跳转文章详情页面
    goToArticleDetailView(item) {
      if (item.viewRange === 'All') {
        this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
      } else if (this.hasToken) {
        this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
      } else if (!this.hasToken) {
        this.$confirm('系统识别您尚未登录，是否跳转登录页面？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            window.location.assign('/login');
          })
          .catch(() => {});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#background {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.el-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  bottom: 130px;
  background-color: #ffffff;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.content {
  background-color: #ffffff;
  padding: 20px 150px 0 150px;
  .title {
    padding-left: 10px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #027db4;
    background-color: #f5fdff;
  }
  .data-list {
    padding: 25px 0 0 0;
    .row-list {
      padding: 0 0 20px 0;
      &-left {
        display: flex;
        align-items: center;
        &-icon {
          width: 0;
          height: 0;
          margin-right: 5px;
          border: 10px solid;
          border-color: transparent transparent transparent #027db4;
        }
      }
      &-right {
        text-align: right;
      }
      &-hr {
        margin: 20px 0 0 0;
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, #027db4 0%, #027db4 70%, transparent 30%);
        background-size: 15px 1px;
        background-repeat: repeat-x;
      }
    }
  }
}
.page-box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130px;
  text-align: center;
  padding: 0 28px 10px 28px;
  background-color: #ffffff;
}
</style>
